<!-- 固定在页面下方的多选提示框 -->
<template>
  <div class="hint-box flex" :style="{left :leftWidth,right:right,bottom:bottom}">
    <div class="lt flex">
      <i class="el-icon-warning"></i>
      <span>已选择<em>{{ num }}</em>项</span>
    </div>
    <div class="rt">
      <slot></slot>
    </div>

  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
export default {
  name: '', // ·������
  props: {
    num: {
      type: Number,
      default: 0
    },
    right: {
      type: Number || String,
      default: '24px'
    },
    bottom: {
      type: Number || String,
      default: '12px'
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    opened() {
      return this.sidebar.opened
    },
    device() {
      return this.$store.state.app.device
    },
    leftWidth() {
      if (this.device === 'mobile') {
        return '0px'
      } else {
        if (!this.opened) {
          return '104px'
        } else {
          return '264px'
        }
      }
    }

  },
  watch: {
    // obj: { //�����Ķ���
    //   deep: true, //���ȼ�������Ϊ true
    //   // ������wacth��������firstName��������֮��������ȥִ��handler����
    //       immediate: true
    //   handler: function(newV, oldV) {
    //   }
    // }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {

  }
}
</script>

<style scoped lang="scss">
  .hint-box {
    position: fixed;
    padding: 20px 24px;
z-index: 5;
    font-size: 14px;
    line-height: 14px;
    background: #E9F9F9;
    border: 1px solid rgba(36, 190, 190, 0.8);

    .lt {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 150px;
      overflow: hidden;

      i {
        color: #24BEBE;
        font-size: 15px;
        margin-right: 10px;
      }

      em {
        margin: 0 8px;
      }
    }

    .rt {
      flex: 1
    }
  }
</style>
